<template>
  <div class="navbox">
        <div class="nav-box1">
           <div  v-for="(item, index) in title" :key="index" @click="goPage(item)">
               {{item}}
           </div>
        </div>
        <div class="footstring"></div>
  </div>
</template>
<script>
// import UrlConfig from '../../url/UrlConfig'
export default{
    name:'NavComponent',
    data() {
        return {
            title:["首页","节气","环境","旅游","生态","气象科普"]
        }
    },
    methods: {
       goPage(title){
            if(title === "首页"){
              window.location.href = "/";
           } else if(title === "节气"){
             this.$router.push("/news?nClass=节气");
           } else if(title === "环境"){
             this.$router.push("/news?nClass=环境");
           } else if(title === "旅游"){
             this.$router.push("/news?nClass=旅游");
           } else if(title === "生态"){
             this.$router.push("/news?nClass=生态");
           } else if(title === "气象科普"){
             this.$router.push("/news?nClass=气象科普");
            }else{
               window.location.href = "/";
           }
       }
    }
}
</script>
<style scoped>

  .nav-box1{
        display: flex;
        background-color: white;
        padding: 0 0 4px;
        /* border-bottom:1px solid #5293cd; */
   }
   .nav-box1 div{
        flex: 1;
        text-align: center;
        height: 23px;
        line-height: 23px;
        color: #ffffff;
        background-color: #5293cd;
        margin: 0 1px;
        font-size: 14px;
        cursor: pointer;
        caret-color: transparent;
   }
   .footstring{
    /*width: 1100px;*/
    height: 2px;
    background-color: #5293cd;
    margin: 0 auto;
    align-items: center;
   }
</style>
